<template>
  <div>
      <quill-editor ref="myTextEditor" :value="content" @input="updateContent" :options="editorOption">
          <div id="toolbar" slot="toolbar">
            <!-- Add a bold button -->
            <button class="ql-bold">Bold</button>
            <button class="ql-italic">Italic</button>
            <!-- Add font size dropdown -->
            <select class="ql-size">
              <option value="small"></option>
              <!-- Note a missing, thus falsy value, is used to reset to default -->
              <option selected></option>
              <option value="large"></option>
              <option value="huge"></option>
            </select>
            <!-- Add subscript and superscript buttons -->
            <button class="ql-script" value="sub"></button>
            <button class="ql-script" value="super"></button>
            <button @click="seletImg" style="width:80px;">图片</button>
          </div>
      </quill-editor>
      <el-dialog title="选择图片" :visible.sync="dialogImgVisible">
          <div class="block" style="margin-top:30px;">
            <el-row>
              <el-col :span="5" v-for="(item, index) in imgs" :offset="index > 0 ? 1 : 0">
                <el-card :body-style="{ padding: '0px' }">
                  <img :src="webUrl + item.f_path" class="image">
                  <div style="padding: 14px;">
                    <span>{{ item.f_remark }}</span>
                    <div class="bottom clearfix">
                      <el-button type="text" class="button" @click="insertImg(item)" >插入图片</el-button>
                    </div>
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
      </el-dialog>
  </div>
</template>

<script>
import Quill from 'quill';
import { ImageResize } from '@/ex/ImageResize';
Quill.register('modules/imageResize', ImageResize);
import { quillEditor } from 'vue-quill-editor';

export default {
    props: ['content', 'imgs'],
    data () {
        return {
            editorOption: {
                modules: {
                    toolbar: '#toolbar',
                    // toolbar: [
                    //     ['bold', 'italic', 'underline', 'strike'],
                    //     ['blockquote', 'code-block'],
                    //     [{'header': 1}, {'header': 2}],
                    //     [{'list': 'ordered'}, {'list': 'bullet'}],
                    //     [{'script': 'sub'}, {'script': 'super'}],
                    //     [{'indent': '-1'}, {'indent': '+1'}],
                    //     [{'direction': 'rtl'}],
                    //     [{'size': ['small', false, 'large', 'huge']}],
                    //     [{'header': [1, 2, 3, 4, 5, 6, false]}],
                    //     [{'color': []}, {'background': []}],
                    //     [{'font': []}],
                    //     [{'align': []}],
                    //     ['clean'],
                    //     ['link']
                    //     // ['link', 'image', 'video']
                    // ],
                    // imageImport: true,
                    imageResize: {
                        displaySize: true
                    }
                }
            },
            selectIndex: 0,
            dialogImgVisible: false,
            webUrl: this.WEB_CONFIG.weburl
        };
    },
    methods: {
        seletImg () {
            this.dialogImgVisible = true;
            console.log(this.$refs.myTextEditor.quill);
            let range = this.$refs.myTextEditor.quill.getSelection();
            if (range) {
                this.selectIndex = range.index;
            } else {
                this.selectIndex = this.$refs.myTextEditor.quill.getLength();
            }
        },
        insertImg (img) {
            this.$refs.myTextEditor.quill.insertEmbed(this.selectIndex, 'image', this.webUrl + img.f_path);
        },
        updateContent (val) {
            this.$emit('update:content', val);
        }
    },

    components: {
        quillEditor
    }
};
</script>

<style lang="css">
</style>
